<!DOCTYPE html>
<html lang="en">
    <head>
        <title>nTube: Embedded</title>
        <meta embed-version="2.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="nTube: Embed page, a video would be here.">
		<meta charset="UTF-8">
		<meta name="theme-color" content="#282828">
		<link rel="manifest" href="/manifest.json">
        <script src="resources/base.js"></script>
        <script src="resources/nplayer.js"></script>
        <script src="resources/settings.js"></script>
        <script src="resources/nplayer_mse/nMuxer.js"></script>
		<link rel="preload" href="resources/base.js" as="script">
		<link rel="preload" href="resources/nplayer.js" as="script">
		<link rel="preload" href="resources/settings.js" as="script">
		<link rel="preload" href="resources/nplayer_mse/nMuxer.js" as="script">
        <style>
            html {
                background-color: #111111;
                color: white;
            }
            * {
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
        </style>
        <style id="_css_fonts">
            html {
                font-family: -apple-system, BlinkMacSystemFont, 'Product Sans', 'Google Sans', 'Segoe UI', 'Arial', sans-serif;
            }
        </style>
        <style id="_subtitle_css">
            ::cue {
                padding: 5px;
                border: 1px solid green;
                font-family: inherit;
            }
        </style>
        <style>
            .video-info-overlay {
				position: fixed;
				width: 100%;
				height: 10%;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0,0,0,0);
				z-index: 1;
				cursor: pointer;
			}
            .outlined {
                text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
            }
            .container {
  position: absolute;
  top: 50%;
  left: 48%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.layer {
  display: block;
  position: absolute;
  height: 3em;
  width: 3em;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
          transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg);
}
.layer:nth-of-type(1) {
  background: #a11212;
  margin-top: 1.5em;
  -webkit-animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
          animation: movedown 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) 0.9s infinite normal;
}
.layer:nth-of-type(1):before {
  content: '';
  position: absolute;
  width: 85%;
  height: 85%;
  background: #a11212;
}
.layer:nth-of-type(2) {
  background: #5d9478;
  margin-top: 0.75em;
}
.layer:nth-of-type(3) {
  background: rgba(255, 255, 255, 0.6);
  -webkit-animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
          animation: moveup 1.8s cubic-bezier(0.39, 0.575, 0.565, 1) infinite normal;
}

@-webkit-keyframes moveup {
  0%, 60%, 100% {
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
  }
  25% {
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
  }
}
@keyframes moveup {
  0%, 60%, 100% {
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
  }
  25% {
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(1em);
  }
}
@-webkit-keyframes movedown {
  0%, 60%, 100% {
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
  }
  25% {
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
  }
}
@keyframes movedown {
  0%, 60%, 100% {
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(0);
  }
  25% {
    -webkit-transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
            transform: rotateX(50deg) rotateY(0deg) rotateZ(45deg) translateZ(-1em);
  }
}
        </style>
    </head>
    <body style="padding: 0px; margin: 0px;">
    	<div id="loading-indicator" style="z-index: 3; position: sticky; left: 40%; top: 45%;">
            <div class='container'>
                <i class='layer'></i>
                <i class='layer'></i>
                <i class='layer'></i>
            </div>
        </div>
        <div>
            <div id="video_primary_div">
                <video id="_primary_player" style="width: 100%; height: calc(100vh - 5px);" controls="false" autoplay="autoplay"></video>
            </div>
            <video id="_secondary_player" style="visibility: hidden; display: none;"></video>
        </div>
        <div class="video-info-overlay" onmouseover="unhideVideoInfo();" onmouseout="hideVideoInfo();">
            <div style="margin-bottom: -10px;">
                <span class="outlined" style="display: inline-table; font-weight: bold; margin-left: 15px; font-size: x-large; vertical-align: middle;">
                    <a href="/watch" style="text-decoration: none; color: inherit;"><span style="color: red;">n</span><span style="color: lightgreen;">T</span>.</a>
                </span>
                <h3 class="outlined" style="display: inline-table; width: 70%; vertical-align: middle; font-style: normal; margin-left: 15px; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; font-size: 1.2em;vertical-align: middle; pointer-events: none; " id="video-title">
                    Loading...
                </h3>
            </div>
            <p id="video-overlay-info" class="outlined" style="margin-bottom: 0px; pointer-events: none; margin-top: 0px; margin-left: 15px; font-size: large;">WARNING_STRING_NOT_INIT</p>
            <p id="video-overlay-sub" class="outlined" style="pointer-events: none; margin-top: 0px; margin-left: 15px; font-size: medium;">No further information provided.</p>
        </div>
    </body>
</html>